<template>
  <div class="numberpad-container">
    <div class="output">{{ currentInput }}</div>
    <div class="buttons">
      <!-- 按键对应的内容 数字都绑定使用一个事件 -->
      <button @click="inputContent">1</button>
      <button @click="inputContent">2</button>
      <button @click="inputContent">3</button>
      <button @click="remove">删除</button>
      <button @click="inputContent">4</button>
      <button @click="inputContent">5</button>
      <button @click="inputContent">6</button>
      <button @click="clear">清空</button>
      <button @click="inputContent">7</button>
      <button @click="inputContent">8</button>
      <button @click="inputContent">9</button>
      <button @click="ok" class="ok">OK</button>
      <button @click="inputContent" class="zero">0</button>
      <button @click="inputContent">.</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import time from "dayjs";
import { inject, Ref, ref } from "vue";
import { useTagLists } from "./../../store";
// 引入发布订阅中介mitt
// 通过最顶层的app组件将mitt组件通信工具注入 子组件可以通过inject取出调用
// 不需要通过挂载到app这个vue实例上的方法 使用provide更简单
const mitter: any = inject("mitter");
let store = useTagLists();
const currentInput: Ref<string> = ref("0");
// 数字绑定输入事件
const inputContent = (e: { target: any }) => {
  // 输入内容就是button自身的value
  const button = e.target;
  const input = button.textContent;
  if (currentInput.value.length === 16) {
    return;
  }

  if (currentInput.value === "0") {
    // indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
    if ("0123456789".indexOf(currentInput.value) >= 0) {
      currentInput.value = input;
    } else {
      currentInput.value += input;
    }
    return;
  }
  if (currentInput.value.indexOf(".") >= 0 && input === ".") {
    return;
  }
  currentInput.value += input;
};

// 删除输入一位的事件
const remove = () => {
  if (currentInput.value.length === 1) {
    currentInput.value = "0";
  } else {
    // slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串
    // const str = "12345";
    // console.log(str.slice(0, -1));
    // > "1234"

    currentInput.value = currentInput.value.slice(0, -1);
  }
};

//清空输入
const clear = () => {
  currentInput.value = "0";
};

//
const ok = () => {
  const currentTime = time().format("YYYY-MM-DD HH:mm:ss");
  // 获取输入的所有数字number
  const number = parseFloat(currentInput.value);
  store.finishInput(number, currentTime);
  // 点击Ok后要清空输入
  currentInput.value = "0";
  // 点击ok经由mitter触发事件ClearNotesInput把备注组件notes的输入框清空
  mitter.emit("ClearNotesInput");
};
</script>

<style scoped lang="less">
.numberpad-container {
  @keyBoardColor: #ebeff2;
  height: 50vh;
  background-color: rgb(211, 196, 113);
  .output {
    &::after {
      content: "";
      clear: both;
      display: block;
    }
    // @extend %innerShadow;
    font-size: 40px;
    font-family: Consolas, monospace;
    padding: 0px 16px;
    text-align: right;
    height: 10vh;
    line-height: 10vh;
    background-color: #fff;
  }
  .buttons {
    &::after {
      content: "";
      clear: both;
      display: block;
    }
    font-size: 22px;
    button {
      width: 25%;
      // height: 64px;
      height: 10vh;
      float: left;
      background: transparent;
      border: none;
      &.ok {
        height: 20vh;
        float: right;
      }
      &.zero {
        width: 25 * 2%;
      }
      // 用选择器实现颜色渐变
      &:nth-child(1) {
        background: @keyBoardColor;
      }
      &:nth-child(2),
      &:nth-child(5) {
        background: darken(@keyBoardColor, 4%); //在#ebeff2的基础上加深%4的颜色
      }
      &:nth-child(3),
      &:nth-child(6),
      &:nth-child(9) {
        background: darken(@keyBoardColor, 4 * 2%);
      }
      &:nth-child(4),
      &:nth-child(7),
      &:nth-child(10) {
        background: darken(@keyBoardColor, 4 * 3%);
      }
      &:nth-child(8),
      &:nth-child(11),
      &:nth-child(13) {
        background: darken(@keyBoardColor, 4 * 4%);
      }
      &:nth-child(14) {
        background: darken(@keyBoardColor, 4 * 5%);
      }
      &:nth-child(12) {
        background: darken(@keyBoardColor, 4 * 6%);
      }
    }
  }
}
</style>
